Of Stack

JS Simple Packaged Image Seamless Scroll Effect Sample [Test Available]

  • 2021-08-05 08:38:23
  • OfStack

In this paper, an example is given to describe the seamless scrolling effect of pictures in JS simple package. Share it for your reference, as follows: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> Example of seamless scrolling pictures -F-BLOG</title>
    <style type="text/css">
      ul{list-style:none;padding:0px;margin:0px;}
      #demo1 ul,#demo2 ul{width:400px;}
      #demo1 li,#demo2 li{float:left;}
    </style>
    <script type="text/javascript">
      function $(id){
        return document.getElementById(id);
      }
      function Marquee(id,toFollow,speed)
      {
        var doScroll;
        var scrollBox_x="<table cellpadding='0' cellspacing='0'><tr><td id='"+id+"abox'>"+$(id).innerHTML+"</td><td id='"+id+"bbox'>"+$(id).innerHTML+"</td></tr></table>";
        var scrollBox_y="<table cellpadding='0' cellspacing='0'><tr><td id='"+id+"abox'>"+$(id).innerHTML+"</td></tr><tr><td id='"+id+"bbox'>"+$(id).innerHTML+"</td></tr></table>";
        var begin=function(){
          switch(toFollow){
            case "left":
              $(id).innerHTML=scrollBox_x;
              doScroll=setInterval(function(){
                if($(id).scrollLeft==$(id+"abox").offsetWidth) $(id).scrollLeft=0;
                $(id).scrollLeft++;
              },speed);
              break;
            case "right":
              $(id).innerHTML=scrollBox_x;
              doScroll=setInterval(function(){
                if($(id).scrollLeft<=0) $(id).scrollLeft=$(id+"bbox").offsetWidth;
                $(id).scrollLeft--;
              },speed);
              break;
            case "top":
              $(id).innerHTML=scrollBox_y;
              doScroll=setInterval(function(){
                if($(id).scrollTop==$(id+"abox").offsetHeight) $(id).scrollTop=0;
                $(id).scrollTop++;
              },speed);
              break;
            case "bottom":
              $(id).innerHTML=scrollBox_y;
              doScroll=setInterval(function(){
                if($(id).scrollTop<=0) $(id).scrollTop=$(id+"bbox").offsetHeight;
                $(id).scrollTop--;
              },speed);
              break;
            }
          }
          begin();
          $(id).onmouseover=function() {clearInterval(doScroll);}
          $(id).onmouseout=function() {begin();}
        }
        window.onload=function(){
          Marquee("demo2","left",30);
          Marquee("demo1","right",20);
          Marquee("demo3","top",30);
          Marquee("demo4","bottom",30);
        }
</script>
  </head>
<body>
   <div id="demo1" style="overflow:hidden;height:100px;width:300px;">
     <ul>
       <li><img src="mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" /></li>
       <li><img src="me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" /></li>
     </ul>
   </div>
   <br/>
   <div id="demo2" style="overflow:hidden;height:100px;width:300px;">
     <ul>
       <li><img src="mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" /></li>
       <li><img src="me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" /></li>
     </ul>
   </div>
   <br/>
   <div id="demo3" style="overflow:hidden;height:150px;width:200px;">
     <ul>
       <li><img src="mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" /></li>
       <li><img src="me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" /></li>
     </ul>
   </div>
   <br/>
   <div id="demo4" style="overflow:hidden;height:150px;width:200px;">
     <ul>
       <li><img src="mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" /></li>
       <li><img src="me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" /></li>
     </ul>
   </div>
</body>
</html>

More readers interested in JavaScript can check the topics of this site: "Summary of JavaScript Switching Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Effects and Skills", "Summary of JavaScript Error and Debugging Skills", "Summary of JavaScript Data Structure and Algorithm Skills", "Summary of JavaScript Traversal Algorithms and Skills" and "Summary of JavaScript Mathematical Operation Usage"

I hope this article is helpful to everyone's JavaScript programming.

Related articles: